<template>
  <div class="app-container">
    <div class="app-main">
      <div class="mainName">会员企业人员信息采集</div>

      <div>
        <el-table v-loading="loading" :data="list" border stripe :key="1">
          <el-table-column
            label="序号"
            align="center"
            type="index"
          ></el-table-column>
          <el-table-column label="申请编号" align="center" prop="formNum">
            <template slot-scope="scope">
              <div
                style="color: #0955b3; cursor: pointer"
                @click="openDetail(scope.row)"
              >
                {{ scope.row.formNum }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="企业名称" align="center" prop="controlName" />
          <el-table-column label="创建日期" align="center" prop="createTime" />
          <el-table-column label="操作员" align="center" prop="controlId" />
          <el-table-column label="状态" align="center" prop="approvalType">
            <template slot-scope="scope">
              <span v-if="scope.row.approvalType === '1'"> 编辑 </span>
              <span v-if="scope.row.approvalType === '2'"> 待审核 </span>
              <span v-if="scope.row.approvalType === '3'"> 已审核 </span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            fixed="right"
            width="250"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleDetail(scope.row)"
                >详情</el-button
              >
              <el-button
                v-if="
                  scope.row.approvalType !== '3' &&
                  !['80', '81', '93'].includes(parentMsg.deptType)
                "
                size="mini"
                type="text"
                @click="handleEdit(scope.row)"
                >录入人员</el-button
              >
              <el-button
                size="mini"
                type="text"
                style="color: red"
                v-if="
                  scope.row.approvalType === '2' &&
                  !['80', '81', '93'].includes(parentMsg.deptType)
                "
                @click="handleDelete(scope.row)"
                >撤销提交</el-button
              >
              <el-button
                size="mini"
                type="text"
                v-if="
                  scope.row.approvalType === '1' &&
                  !['80', '81', '93'].includes(parentMsg.deptType)
                "
                @click="handleSubmit(scope.row)"
                >提交审核</el-button
              >
              <el-button
                size="mini"
                type="text"
                v-if="
                  scope.row.approvalType === '2' &&
                  ['80', '81', '93'].includes(parentMsg.deptType)
                "
                @click="handleReview(scope.row)"
                >审核</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
          class="pagination-container"
        />
      </div>
    </div>

    <!-- 人员录入弹窗 -->
    <personnelEntryDialog
      v-if="entryDialogShow"
      :show="entryDialogShow"
      :detailForm="entryDialogForm"
      :mode="entryDialogMode"
      @closeMsg="closeEntryDialog"
    />

    <!-- 审核弹窗 -->
    <el-dialog
      title="审核"
      :visible.sync="reviewDialogVisible"
      width="500px"
      :append-to-body="true"
      :before-close="handleReviewDialogClose"
    >
      <div style="text-align: center; padding: 20px 0">
        <p style="font-size: 16px; margin-bottom: 30px">请选择审核结果</p>
        <el-button
          type="primary"
          size="medium"
          @click="handleReviewConfirm(1)"
          :loading="reviewLoading"
          style="margin-right: 20px"
        >
          审核通过
        </el-button>
        <el-button
          type="danger"
          size="medium"
          @click="handleReviewConfirm(2)"
          :loading="reviewLoading"
        >
          审核不通过
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  companyApplyQuery, // 人员信息
  companyApplyCancel, // 选中撤销提交审核
  companyOperatorAddSubmit, // 新增人员信息 - 防治企业 - 将编辑状态修改为提交待审核状态
  companyReview, // 审核防治公司数据
} from "@/api/manage/approval";
import { mapGetters } from "vuex";
import personnelEntryDialog from "./components/personnelEntryDialog.vue";

export default {
  name: "personnelCollection",
  components: {
    personnelEntryDialog,
  },
  data() {
    return {
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      entryDialogShow: false,
      entryDialogForm: {},
      entryDialogMode: "edit", // 'edit' 或 'detail'
      list: [],
      total: 0,
      reviewDialogVisible: false,
      reviewLoading: false,
      currentReviewRow: null, // 当前审核的行数据
    };
  },
  created() {
    this.getList();
  },
  computed: {
    ...mapGetters(["parentMsg"]),
  },
  methods: {
    getList() {
      this.loading = true;
      companyApplyQuery(this.queryParams)
        .then((res) => {
          console.log(res, "23232");
          if (res.errorCode == "000000") {
            this.list = res.data.list;
            this.total = res.data.total;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    openDetail(row) {
      console.log("查看详情", row);
      // TODO: 打开详情弹窗或跳转详情页
    },
    handleEdit(row) {
      console.log("录入人员", row);
      this.entryDialogForm = { ...row };
      this.entryDialogMode = "edit";
      this.entryDialogShow = true;
    },
    handleDetail(row) {
      console.log("查看详情", row);
      this.entryDialogForm = { ...row };
      this.entryDialogMode = "detail";
      this.entryDialogShow = true;
    },
    closeEntryDialog(data) {
      this.entryDialogShow = false;
      if (data) {
        console.log("保存的人员数据", data);
        // TODO: 调用接口保存数据
        this.getList();
      }
    },
    handleDelete(row) {
      const data = {
        controlId: row.controlId,
        ids: [row.formNum],
      };
      this.$modal
        .confirm("是否确认撤销提交审核？")
        .then(function () {
          return companyApplyCancel(data);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("撤销成功！");
        })
        .catch(() => {});
    },
    handleSubmit(row) {
      const data = {
        controlId: row.controlId,
        formNum: row.formNum,
        // ids: [row.formNum],
      };
      this.$modal
        .confirm("是否确认提交审核？")
        .then(function () {
          return companyOperatorAddSubmit(data);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("提交成功！");
        })
        .catch(() => {});
    },
    handleReview(row) {
      // 显示审核弹窗
      this.currentReviewRow = row;
      this.reviewDialogVisible = true;
    },
    handleReviewDialogClose() {
      // 关闭弹窗时清空数据
      this.reviewDialogVisible = false;
      this.currentReviewRow = null;
      this.reviewLoading = false;
    },
    handleReviewConfirm(type) {
      // type: 1-审核通过, 2-审核不通过
      if (!this.currentReviewRow) {
        this.$modal.msgWarning("缺少审核数据");
        return;
      }

      const data = {
        formNum: this.currentReviewRow.formNum,
        passType: type,
      };

      this.reviewLoading = true;
      companyReview(data)
        .then((res) => {
          if (res.errorCode === "000000") {
            this.$modal.msgSuccess(type === 1 ? "审核通过！" : "审核不通过！");
            this.reviewDialogVisible = false;
            this.currentReviewRow = null;
            this.getList();
          } else {
            this.$modal.msgError(res.errorMsg || "审核失败");
          }
        })
        .catch((error) => {
          this.$modal.msgError("审核失败，请稍后重试");
        })
        .finally(() => {
          this.reviewLoading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.app-main {
  background-color: #fff;
  // padding: 15px 20px;
  border-radius: 8px;

  .mainName {
    font-family:
      PingFangSC,
      PingFang SC;
    font-weight: 500;
    font-size: 16px;
    height: 30px;
    line-height: 30px;
    color: #000000;
    border-bottom: 1px solid #dcdfe6;
    margin-bottom: 15px;
  }
}

.pagination-container {
  margin-top: 15px;
}
</style>
